• Mermaid Github 官网
• Mermaid 在线编辑器

流程图 flowchart

横向

flowchart LR

A[Start] --Some text--> B(Continue)

B --> C{Evaluate}

C -- One --> D[Option 1]

C -- Two --> E[Option 2]

C -- Three --> F[fa:fa-car Option 3]

纵向 (有颜色)

flowchart TD

%% Nodes

A("Project Idea"):::green

B("Initial Planning"):::orange

C("Detailed Design 
 & 
 Requirements"):::blue

D{"Decision: Continue or Stop?"}:::yellow

E("Development Phase"):::pink

F("Testing Phase"):::purple

G("Deployment"):::green

H("Feedback and Improvement"):::orange

  

%% Edges

A --> B --> C --> D

D -- Continue --> E --> F --> G

D -- Stop --> H

G --> H

H --> B

  

%% Styling

classDef green fill:#B2DFDB,stroke:#00897B,stroke-width:2px;

classDef orange fill:#FFE0B2,stroke:#FB8C00,stroke-width:2px;

classDef blue fill:#BBDEFB,stroke:#1976D2,stroke-width:2px;

classDef yellow fill:#FFF9C4,stroke:#FBC02D,stroke-width:2px;

classDef pink fill:#F8BBD0,stroke:#C2185B,stroke-width:2px;

classDef purple fill:#E1BEE7,stroke:#8E24AA,stroke-width:2px;

时序图 Sequence Diagram

sequenceDiagram

participant Alice as Alice

participant John as John

  

Alice ->>+ John: Hello John, how are you?

Alice ->>+ John: John, can you hear me?

John -->>- Alice: Hi Alice, I can hear you!

John -->>- Alice: I feel great!

类图 Class Diagram

classDiagram

Animal <|-- Duck

Animal <|-- Fish

Animal <|-- Zebra

Animal : +int age

Animal : +String gender

Animal: +isMammal()

Animal: +mate()

class Duck{

+String beakColor

+swim()

+quack()

}

class Fish{

-int sizeInFeet

-canEat()

}

class Zebra{

+bool is_wild

+run()

}